<template>
  <div>
    <v-header :user="userInfo" :createdUser="createdUser"></v-header>
    <div class="content-iframe" id="school-list">
      <div class="add-student-info clearfix">
        <div class="add-info">
          <span class="space-left" @click="addStudentInfo">添加学生信息</span>
          <div class="search-packup pull-right" @click="packUp">
            <span v-show="showSearch">收起</span>
            <span v-show="showSearch" class="glyphicon glyphicon-menu-up"></span>
            <span v-show="!showSearch">展开</span>
            <span v-show="!showSearch" class="glyphicon glyphicon-menu-down"></span>
          </div>
        </div>
      </div>
      <div class="search-nav">
        <div class="nav">
          <div class="clearfix">
            <div class="nav-label pull-left">院校性质：</div>
            <ul class="label-con">
              <li class="label-object" v-for="(item, index) in schoolType" :class="{active: item.current}"
                  v-on:click="searchLabel(item)">{{item.typeName}}
              </li>
            </ul>
          </div>

          <div class="clearfix">
            <div class="nav-label pull-left">院校层级：</div>
            <ul class="label-con">
              <li class="label-object" v-for="(item, index) in schoolLevel" :class="{active: item.current}"
                  v-on:click="searchLevel(item)">{{item.levelName}}
              </li>
            </ul>
          </div>

          <div class="clearfix">
            <div class="nav-label pull-left">所在省份：</div>
            <ul class="label-con">
              <li class="label-object" v-for="(item, index) in schoolProvince" :class="{active: item.current}"
                  v-on:click="searchProvince(item)">{{item.pvcName}}
              </li>
              <li class="label-object">展开更多</li>
            </ul>
          </div>

          <div class="clearfix">
            <div class="nav-label pull-left">专业选择：</div>
            <ul class="label-con">
              <input type="text" class="label-input label-green" id="exampleInputEmail1" v-model="majorFir"
                     placeholder="搜索内容"/>
              <input type="text" class="label-input label-red" id="exampleInputEmail2" v-model="majorSec"
                     placeholder="搜索内容"/>
              <input type="text" class="label-input label-blue" id="exampleInputEmail3" v-model="majorThr"
                     placeholder="搜索内容"/>
              <div class="search-label" v-on:click="searchMajor()">
                <span class="glyphicon glyphicon-search"></span>
              </div>
              <div style="display: inline-block" v-on:click="resetSearch()">
                <button class="btn btn-default btn-sm">重置</button>
              </div>
            </ul>
          </div>
        </div>
      </div>
      <div class="school-list">
        <div class="container-fluid" style="padding-left: 0;padding-right: 0;">
          <div class="row-fluid">
            <div class="span12">
              <table class="table table-bordered">
                <thead>
                <tr>
                  <th class="w-5" style="cursor: pointer;">代码</th>
                  <th class="school-name">院校名称</th>
                  <th class="w-4">排名</th>
                  <th colspan=3>2015/2016/2017 计划/投档|最低分|最低线差|最低位次</th>
                  <th class="organizer" style="">主管单位</th>
                  <th class="list-city">所在市</th>
                  <th class="w-6 school-level">层级</th>
                  <!--<th class="w-8">类型</th>-->
                  <th class="major-plan">专业安排</th>
                  <th class="w-6">18计</th>
                  <!--<th class="w-3">选</th>-->
                </tr>
                </thead>
                <tbody v-for="(item, index) in schoolInfo ">
                <tr
                  :class="{bgGray: item.color==1,bgSearchFir: item.color==2,bgSearchSec: item.color==3,bgSearchThr: item.color==4}">
                  <td style="cursor: pointer;" v-on:click="showMajor(item, index)">{{item.code}}</td>
                  <td :id="item.code + '_dsc'" @mouseover="showDsc(item)" @mouseout="hideDsc(item)" style="cursor: pointer;">
                    {{item.schoolName}}
                    <div class="dscTip" >
                      {{item.describe}}
                    </div>
                    <div class="top-arrow"></div>
                  </td>
                  <td>{{item.sortNum}}</td>
                  <td class="text-right">{{item.msg2015}}</td>
                  <td class="text-right">{{item.msg2016}}</td>
                  <td class="text-right">{{item.msg2017}}</td>
                  <td style="font-size: 12px">{{item.manager.length>4?item.manager.substr(0, 4):item.manager}}</td>
                  <td style="font-size: 12px">{{item.city}}</td>
                  <td :class="{colorMian: item.level.current}" style="font-size: 12px">{{item.level.name}}</td>
                  <!--<td :class="{colorMian: item.property.current}">{{item.property.name}}</td>-->
                  <td style="font-size: 12px">3-3-3-3-3</td>
                  <td>{{item.planStatus2018}}↑</td>
                  <!--<td>-->
                    <!--<div class="checkbox" style="margin-top: 0;margin-bottom: 0">-->
                      <!--<label>-->
                        <!--<input type="checkbox">-->
                      <!--</label>-->
                    <!--</div>-->
                  <!--</td>-->
                </tr>
                <tr v-show="item.majorInfo">
                  <td colspan=13 class="pad0">
                    <!-- 专业表 -->
                    <table class="table table-bordered school-major major-table" :id="item.code + '_mojar'">
                      <thead>
                      <tr class="tr-bor-t">
                        <th style="width: 4.5%;">代码</th>
                        <th style="width: 17.6%;">专业名称</th>
                        <th>层级</th>
                        <th colspan=3>2015/2016/2017 计划/投档|最低分|最低线差|最低位次</th>
                        <th style="width: 4%;">18计</th>
                        <!--<th>选</th>-->
                        <th>报考限制</th>
                      </tr>
                      </thead>
                      <tbody :id="item.code + '_mojar_tbody'">
                      <tr v-for="(majorItem, majorIndex) in item.majorInfo">
                        <td>{{majorItem.code}}</td>
                        <td class="marjor-name" :id="majorItem.code + '_' + majorIndex + '_majordsc'" @mouseover="showMajorDsc(item, majorIndex)"
                            @mouseout="hideMajorDsc(item, majorIndex)">
                          {{majorItem.majorName}}
                          <div class="major-dsc-tip">专业描述</div>
                          <div class="major-dsc-arrow"></div>
                        </td>
                        <td>{{majorItem.level}}</td>
                        <td class="text-right">{{majorItem.msg2015}}</td>
                        <td class="text-right">{{majorItem.msg2016}}</td>
                        <td class="text-right">{{majorItem.msg2017}}</td>
                        <td>{{majorItem.planStatus2018}}↑</td>
                        <!--<td style="width: 3%;">-->
                          <!--<div class="checkbox" style="margin-top: 0;margin-bottom: 0">-->
                            <!--<label>-->
                              <!--<input type="checkbox">-->
                            <!--</label>-->
                          <!--</div>-->
                        <!--</td>-->
                        <td>报考限制</td>
                      </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script type="text/ecmascript-6">
  import $ from 'jquery';
  import Vue from 'vue';
  import header from '../header/header.vue';
  import footer from '../footer/footer.vue';

  export default {
    components: {
      'v-header': header,
      'v-footer': footer
    },
    data() {
      return {
        userInfo: '',
        createdUser: '',
        showSearch: true,
        schoolInfo: [],
        schoolType: [
          {
            typeName: '综合类',
            current: false
          },
          {
            typeName: '理工类',
            current: false
          },
          {
            typeName: '财经类',
            current: false
          },
          {
            typeName: '师范类',
            current: false
          },
          {
            typeName: '语言类',
            current: false
          }
        ],
        schoolLevel: [
          {
            levelName: '985',
            current: false
          },
          {
            levelName: '211',
            current: false
          },
          {
            levelName: '小211',
            current: false
          },
          {
            levelName: '省重点',
            current: false
          },
          {
            levelName: '师范高职',
            current: false
          }
        ],
        schoolProvince: [
          {
            pvcName: '陕西省',
            current: false
          },
          {
            pvcName: '北京市',
            current: false
          },
          {
            pvcName: '上海市',
            current: false
          },
          {
            pvcName: '湖北省',
            current: false
          },
          {
            pvcName: '浙江省',
            current: false
          }
        ],
        majorFir: '',
        majorSec: '',
        majorThr: '',
        searchFir: [],
        searchFirComp: false,
        searchSec: [],
        searchSecComp: false,
        searchThr: [],
        searchThrComp: false
      };
    },
    created() {
      this.fetchData();
    },
    methods: {
      fetchData() {
        let username = this.$utils.getUrlKey('username');
        this.userInfo = username;
        this.createdUser = this.$utils.getUrlKey('createdUser');
        this.getSchool();              // 定义方法
      },
      // 搜索条件展开收起
      packUp() {
        if (this.showSearch) {
          $('.search-nav').css('display', 'none');
        } else {
          $('.search-nav').css('display', 'block');
        }
        this.showSearch = !this.showSearch;
      },

      getSchool() {
        var self = this;
        this.$http.get(this.HOST + 'mendao/getSchool', {}).then(function (response) {
          if (response.data.code == 1) {
            self.schoolInfo = response.data.list;
            for (var i = 0; i < self.schoolInfo.length; i++) {
              self.schoolInfo[i].majorInfo = '';
            }
          } else {
            console.log('数据请求失败1');
          }
        })
          .catch(function (error) {
            console.log(error);
          });

      },

      showMajor: function (item, index) {
        item.isShowMajor = !item.isShowMajor;
        if (item.isShowMajor) {
          this.getMajor(item, index);
          $('#' + item.code + '_mojar').show();
        } else {
          $('#' + item.code + '_mojar').hide();
        }
      },

      // 院校性质标签
      searchLabel(item) {
        for (var i = 0; i < this.schoolType.length; i++) {
          this.schoolType[i].current = false;
        }
        if (item) {
          item.current = true;
          // 列表中对应的地方高亮
          this.listPosition('property', item.typeName);
        }
      },

      // 院校层级标签
      searchLevel(item) {
        for (var i = 0; i < this.schoolLevel.length; i++) {
          this.schoolLevel[i].current = false;
        }
        if (item) {
          item.current = true;
          // 列表中对应的地方高亮
          this.listPosition('level', item.levelName);
        }
      },

      // 院校层级标签
      searchProvince(item) {
        for (var i = 0; i < this.schoolProvince.length; i++) {
          this.schoolProvince[i].current = false;
        }
        if (item) {
          item.current = true;
          // 列表中对应的地方高亮
        }
      },

      // 定位在列表中的位置并且高亮
      listPosition(key, value) {
        for (var i = 0; i < this.schoolInfo.length; i++) {
          if (key == 'property') {
            this.schoolInfo[i].property.current = false;
            if (this.schoolInfo[i].property.name.slice(0, 3) == value) {
              this.schoolInfo[i].property.current = true;
            }
          }
          if (key == 'level') {
            this.schoolInfo[i].level.current = false;
            if (this.schoolInfo[i].level.name == value) {
              this.schoolInfo[i].level.current = true;
            }
          }
        }

      },

      // 获取专业
      getMajor(item, index) {
        var self = this;
        // 请求后端
        this.$http.post(this.HOST + '/mendao/getMajor?type=1&schoolCode=' + item.code, {}).then(function (res) {
          if (res.data.code == 1) {
            item.majorInfo = res.data.list;
            var info = item;
            Vue.set(self.schoolInfo, index, info);
            console.log('数据请求成功');
          } else {
            console.log('数据请求失败');
          }

        }, function (res) {
          alert(res.status)
        });
      },

      // 搜索专业
      searchMajor() {
        var self = this;
        if (this.majorFir) {
          this.searchSchool(2, this.majorFir);
        }
        if (this.majorSec) {
          this.searchSchool(3, this.majorSec);
        }
        if (this.majorThr) {
          this.searchSchool(4, this.majorThr);
        }

      },

      searchSchool(searchType, major) {
        console.log('搜索功能');
        var self = this;
        // 请求后端
        this.$http.get(this.HOST + '/mendao/getSchool?type=1&major=' + major, {
          type: 1,
          major: major
        }).then(function (res) {
          if (parseInt(res.data.code) === 1) {
            if (searchType === 2) {
              self.searchFir = res.data.list;
            } else if (searchType === 3) {
              self.searchSec = res.data.list;
            } else if (searchType === 4) {
              self.searchThr = res.data.list;
              self.formatData();
            }
            console.log('数据请求成功');

            if (self.searchFir.length > 0 && (self.searchSec.length == 0 && self.searchThr == 0)) {
              self.formatData();
            }
            if (self.searchFir.length > 0 && self.searchSec.length > 0 && self.searchThr == 0) {
              self.formatData();
            }

            if (self.searchFir.length == 0 && (self.searchSec.length == 0 && self.searchThr == 0)) {
              self.schoolInfo = [];
            }

          } else {
            console.log('数据请求成功');
          }
        })
          .catch(function (error) {
            console.log(error);
          });
      },

      // 搜索数据整理
      formatData() {
        let self = this;
        // 去重方法
        var tempSec = self.searchSec;
        var tempThr = self.searchThr;

        // 第一个搜索框有内容
        if (this.majorFir && !this.majorSec && !this.majorThr) {
          console.log("第一搜索框都有内容" + JSON.stringify(self.searchFir));
          for (var i = 0; i < self.searchFir.length; i++) {
            self.searchFir[i].majorInfo = '';
            self.searchFir[i].color = 2;
          }
          self.schoolInfo = self.searchFir;
          return;
        }
        // 第一个和第二个搜索框有内容
        if (this.majorFir && this.majorSec && !this.majorThr) {
          self.searchSec = this.removeRepeat(self.searchFir, tempSec);
          for (var i = 0; i < self.searchFir.length; i++) {
            self.searchFir[i].majorInfo = '';
            self.searchFir[i].color = 2;
          }
          for (var i = 0; i < self.searchSec.length; i++) {
            self.searchSec[i].majorInfo = '';
            self.searchSec[i].color = 3;
          }
          self.schoolInfo = self.searchFir.concat(self.searchSec);
          return;
        }
        // 三个搜索框有内容
        if (this.majorFir && this.majorSec && this.majorThr) {
          var tempArr = this.removeRepeat(self.searchFir, tempThr);
          self.searchThr = this.removeRepeat(self.searchSec, tempArr);
          for (var i = 0; i < self.searchFir.length; i++) {
            self.searchFir[i].majorInfo = '';
            self.searchFir[i].color = 2;
          }
          for (var i = 0; i < self.searchSec.length; i++) {
            self.searchSec[i].majorInfo = '';
            self.searchSec[i].color = 3;
          }
          for (var i = 0; i < self.searchThr.length; i++) {
            self.searchThr[i].majorInfo = '';
            self.searchThr[i].color = 4;
          }
          self.schoolInfo = self.searchFir.concat(self.searchSec).concat(self.searchThr);
          return;
        }
      },

      // 搜索去重方法
      removeRepeat(arr1, arr2) {
        var finalArr = [];
        for (var i = 0; i < arr2.length; i++) {
          for (var j = 0; j < arr1.length; j++) {
            if (arr2[i].code !== arr1[i].code) {
              finalArr.push(arr2[i]);
            }
          }
        }
        return finalArr;
      },

      // 显示学校简介
      showDsc(item) {
        $('#' + item.code + '_dsc').children('div').show();
      },
      hideDsc(item) {
        $('#' + item.code + '_dsc').children('div').hide();
      },
      // 显示专业简介
      showMajorDsc(item, index) {
        $('#' + item.code  + '_' + index + '_majordsc').children('div').show();
      },
      hideMajorDsc(item, index) {
        $('#' + item.code  + '_' + index + '_majordsc').children('div').hide();
      },
      resetSearch() {
        this.searchLabel(false);
        this.searchLevel(false);
        this.searchProvince(false);
        this.majorFir = '';
        this.majorSec = '';
        this.majorThr = '';
        this.getSchool();
      },
      // 跳转添加
      addStudentInfo() {
        let self = this;
        self.$router.push({
          path: '/addStudentFile', query: {
            username: self.userInfo,
            createdUser: self.createdUser
          }
        });
      }
    }
  };
</script>

<style>
  <!--
  全局色值 E65A1E
  -->
  .content-iframe {
    width: 100%;
    top: 50px;
    bottom: 60px;
    position: relative;
  }

  .content-iframe .add-student-info {
    position: fixed;
    width: 100%;
    height: 37px;
    top: 46px;
    background-color: #fff;
    color: #E65A1E;
    border-bottom: 1px solid #bbbbbb;
    z-index: 3;
  }

  .content-iframe .add-student-info .add-info {
    width: 1190px;
    margin: 0 auto;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
  }

  .content-iframe .add-student-info .search-packup {
    padding: 3px 12px;
    color: #E65A1E;
    font-size: 14px;
    vertical-align: middle;
    cursor: pointer;
  }

  .content-iframe .add-student-info .space-left {
    margin-left: 63px;
  }

  .content-iframe .search-nav {
    position: fixed;
    width: 100%;
    display: none;
    margin: 0 auto;
    top: 83px;
    padding: 10px 0;
    border-bottom: 2px solid #bbb;
    overflow-y: hidden;
    background: #fff;
    z-index: 3;
  }

  .content-iframe .search-nav .nav {
    position: relative;
    width: 1190px;
    margin: 0 auto;
  }

  .content-iframe .search-nav .nav-label {
    min-height: 28px;
    line-height: 28px;
    margin-right: 20px;
  }

  .content-iframe .search-nav .btn {
    padding: 3px 12px;
    border-radius: 15px;
  }

  .content-iframe .search-nav .btn:hover {
    color: #E65A1E;
    background-color: #fff;
    border-color: #E65A1E;
  }

  .content-iframe .search-nav .btn:focus, .btn:active:focus {
    outline: none;
    border-color: #E65A1E;
    color: #E65A1E;
    box-shadow: none;
    background-color: #fff;
  }

  .content-iframe .search-nav .btn:active,
  .content-iframe .search-nav .btn.active {
    border-color: #E65A1E;
    color: #E65A1E;
    box-shadow: none;
    background-color: #fff;
  }

  .label-con {
    display: block;
    padding-left: 70px;
  }

  .content-iframe .search-nav .label-object {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 15px;
    margin-bottom: 0;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #ccc;
    margin-right: 10px;
  }

  .content-iframe .search-nav .label-object:hover,
  .content-iframe .search-nav .label-object:focus,
  .content-iframe .search-nav .label-object:active,
  .content-iframe .search-nav .label-con .active {
    border-color: #E65A1E;
    color: #E65A1E;
    background-color: #fff;
  }

  .content-iframe .search-nav .label-input {
    display: inline-block;
    width: 200px;
    padding: 3px 12px;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 15px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  }

  .content-iframe .search-nav .label-input:focus {
    outline: none;
    box-shadow: none;
    background-color: #fff;
  }

  .content-iframe .search-nav .label-green {
    border-color: #8bc34a;
  }

  .content-iframe .search-nav .label-red {
    border-color: #ff4081;
  }

  .content-iframe .search-nav .label-blue {
    border-color: #3f51b5;
  }

  .content-iframe .search-nav .search-label {
    display: inline-block;
    padding: 2px 10px;
    color: #E65A1E;
    font-size: 20px;
    vertical-align: middle;
    cursor: pointer;
  }

  .content-iframe .school-list {
    width: 1190px;
    margin: auto;
    position: relative;
    overflow: auto;
    margin-top: 100px;
  }

  .content-iframe .school-list .table-bordered > thead > tr > th {
    text-align: center;
  }

  .content-iframe .school-list .w-21 {
    width: 21%;
  }

  .content-iframe .school-list .w-12 {
    width: 12%;
  }

  .content-iframe .school-list .w-10 {
    width: 10%;
  }

  .content-iframe .school-list .w-8 {
    width: 8%;
  }

  .content-iframe .school-list .school-name {
    width: 32% !important;
  }

  .content-iframe .school-list .organizer {
    font-size: 12px;
    width: 9%;
  }

  .content-iframe .school-list .list-city {
    font-size: 12px;
    width: 8%;
  }

  .content-iframe .school-list .school-level {
    width: 6%;
    font-size: 12px;
  }

  .content-iframe .school-list .major-plan {
    width: 9%;
    font-size: 12px;
  }

  .content-iframe .school-list .w-5 {
    width: 5%;
  }

  .content-iframe .school-list .w-6 {
    width: 6%;
  }

  .content-iframe .school-list .w-4 {
    width: 4%;
  }

  .content-iframe .school-list .w-3 {
    width: 3%;
  }

  .content-iframe .school-list .table > tbody + tbody {
    border-top: 2px solid #bbb;
  }

  .content-iframe .school-list .table-bordered > thead > tr > th {
    border: 1px solid #bbb;
  }

  .content-iframe .school-list .table-bordered > tbody > tr > td {
    position: relative;
    border: 1px solid #bbb;
  }

  .content-iframe .school-list .bgGray {
    background-color: #dedede;
  }

  .content-iframe .school-list .bgSearchFir {
    background-color: #8bc34a;
  }

  .content-iframe .school-list .bgSearchSec {
    background-color: #ff4081;
  }

  .content-iframe .school-list .bgSearchThr {
    background-color: #3f51b5;
  }

  .content-iframe .school-list .school-code {
    cursor: pointer;
  }

  .content-iframe .school-list .dscTip {
    position: absolute;
    display: none;
    width: 710px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2;
    margin-top: 30px;
    margin-left: 4%;
    border-radius: 8px;
    padding: 8px;
    color: #fff;
    word-wrap: break-word;
    word-break: break-all;
    overflow-y: scroll;
  }
  .content-iframe .school-list .top-arrow {
    position: absolute;
    display: none;
    left: 87px;
    top: 43px;
    width:0;
    height:0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid rgba(0, 0, 0, 0.6);
  }

  .content-iframe .school-list .school-major {
    display: none;
  }

  .content-iframe .school-list .major-table {
    background: #f7d0d2 !important;
    margin-bottom: 0;
  }

  .major-table > tbody > tr > td,
  .major-table > tbody > tr > th,
  .major-table > tfoot > tr > td,
  .major-table > tfoot > tr > th,
  .major-table > thead > tr > td,
  .major-table > thead > tr > th {
    border: 1px solid #333;
  }

  .major-dsc-tip {
    position: absolute;
    display: none;
    width: 710px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2;
    margin-top: 30px;
    margin-left: 8%;
    border-radius: 8px;
    padding: 8px;
    color: #fff;
    word-wrap: break-word;
    word-break: break-all;
    overflow-y: scroll;
  }
  .major-dsc-arrow {
    position: absolute;
    display: none;
    left: 87px;
    top: 43px;
    width:0;
    height:0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid rgba(0, 0, 0, 0.6);
  }

  .marjor-name {
    cursor: pointer;
  }

  /*.marjor-name:hover .major-dsc-tip, .major-dsc-arrow{*/
  /*opacity: 1;*/
  /*}*/

  .content-iframe .school-list .pad0 {
    padding: 0;
  }

  .content-iframe .school-list .tr-bor-t {
    border: 1px solid #333;
  }

  .colorMian {
    color: #E65A1E;
  }
</style>
